import Taro, {Component} from '@tarojs/taro'
import {View, Text, Image} from '@tarojs/components'
import {AtInput} from 'taro-ui'
import saoyisao from '../../assets/img/delivery/saoyisao.png'
import {API_COMM_KUAIDI_INFO} from '../../constants/api'
import fetch from '../../utils/request'
import classNames from 'classnames'

import './index.scss'

class Delivery extends Component {
  state = {
    keyword: '',
    deliveryInfo: {}
  }
  static options = {
    addGlobalClass: true
  }

  config = {
    navigationBarTitleText: '查询快递'
  }

  scanCode(e) {
    e.stopPropagation()
    Taro.scanCode({ //扫描API
      onlyFromCamera: false,
      scanType: ['barCode', 'qrCode', 'pdf417', 'datamatrix'],
      success: (res) => { //扫描成功
        console.log(res) //输出回调信息
        this.setState({
          keyword: res.result
        }, () => {
          this.chaKuaidi(res.result)
        });
      },
      fail: () => {
        Taro.showToast({
          title: '唤起该功能失败',
          duration: 1000,
          icon: 'none'
        })
      }
    })
  }

  keywordChange(keyword) {
    this.setState({
      keyword
    })
    if (!keyword) {
      this.setState({
        deliveryInfo: {}
      })
    }
  }

  async chaKuaidi(keyword) {
    try {
      let result = await fetch({
        url: API_COMM_KUAIDI_INFO,
        payload: {
          // LogisticCode:'557028730048814'
          LogisticCode: keyword
        },
        method: 'POST'
      })
      let deliveryInfo = {
        ...this.state.deliveryInfo,
        ...result
      }
      this.setState({
        deliveryInfo
      })
    } catch (e) {
      console.log('获取快递信息失败', result)
      this.setState({
        deliveryInfo: {}
      })
    }
  }

  componentWillMount() {
  }

  componentDidMount() {
  }

  componentDidShow() {
  }

  componentDidHide() {
  }

  componentCatchError() {
  }

  render() {
    const {keyword, deliveryInfo} = this.state
    return (
      <View className="delivery_page">
        <View className="delivery_tabbar animation-scale-up">
          <AtInput
            confirmType="search"
            type='text'
            placeholder='请输入快递单号或者扫一扫'
            value={keyword}
            onChange={this.keywordChange.bind(this)}
            onConfirm={this.chaKuaidi.bind(this)}
            maxLength={-1}
            clear
          >
            <Image className="delivery_saoyisao" src={saoyisao} onClick={this.scanCode.bind(this)}></Image>
          </AtInput>
        </View>
        <View>
          {
            deliveryInfo && deliveryInfo.Traces &&
            deliveryInfo.Traces.map(item => (
              <View className="timeline" style="">
                <View className="timeline-block">
                  <View className={classNames('ctimeline-img', {'ctimeline-img-success': item.Remark == '已经签收'})}>
                    <Text
                      className={classNames('icon', {'icon-yunshu': item.Remark != '已经签收'}, {'icon-dui': item.Remark == '已经签收'})}></Text>
                    {/* <Image src={saoyisao} alt="Picture" className="timeline-img-item"></Image> */}
                  </View>
                  {/* <View className="item dot-top"></View> */}
                  <View className="r-info">
                    <View className="msgBox">
                      {
                        item.Remark && <View className="msgBox-title">{item.Remark}</View>
                      }

                      <View className="msgBox-desc">{item.AcceptStation}</View>
                      <View className="cd-date">{item.AcceptTime}</View>
                    </View>
                  </View>
                </View>
              </View>
            ))
          }
        </View>
      </View>
    )
  }
}

export default Delivery
